<template>
  <div class="tool">
    <el-tooltip class="item" effect="dark" content="测量距离" placement="top">
      <div class="item" @click="measure('polyline')" :class="{ 'active': drawTool == 'polyline' }">
        <i class="iconfont icon-juliceliang"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="测量面积" placement="top">
      <div class="item" @click="measure('area')" :class="{ 'active': drawTool == 'area' }">
        <i class="iconfont icon-mianji"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="测量高度" placement="top">
      <div class="item" @click="measure('height')" :class="{ 'active': drawTool == 'height' }">
        <i class="iconfont icon-juliceliang"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="清除" placement="top">
      <div class="item" @click="clear">
        <i class="el-icon-delete"></i>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";

let measure = null;
export default {
  data() {
    // this.entitys = [];
    return {
      measureType: "",
    };
  },
  computed: {
    ...mapState("leftMenu", ["drawTool"]),
  },
  watch: {
    drawTool(newVal) {
      let values = ["polyline", "area", 'height'];
      if (newVal && !values.includes(newVal)) {
        measure.cancel();
      }
    },
  },
  mounted() {
    measure = new earth.Measure(viewer);
  },
  methods: {
    ...mapMutations("leftMenu", ["changeTool"]),
    measure(type) {
      if (this.drawTool == type) {
        this.changeTool("");
        return;
      }
      this.drawTool && measure.cancel();
      this.changeTool(type);

      switch (type) {
        case "polyline":
          measure.drawLine().then((entitys) => {
            this.changeTool("");
          });
          break;
        case "area":
          measure.drawArea().then((entitys) => {
            this.changeTool("");
          });
          break;
        case "height":
          measure.drawTriangle()
          this.changeTool("");
          break;
        default:
          break;
      }

    },
    clear() {
      measure.remove();
    },
  },
};
</script>

<style lang="scss" scoped>
.tool {
  margin: 0 30px;
}
</style>